﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>下拉列表</title>
    <link rel="stylesheet" type="text/css" href="../css/screen.css">
    <link rel="stylesheet" type="text/css" href="../css/field.css">
    <script src="../scripts/jquery-1.7.2.min.js"></script>
    <script src="../scripts/jquery.plugin.js"></script>
</head>
<body>
    <div id="fieldWrap" class="form_main table_form">
        <div class="fieldhead">
            <h1>下拉列表</h1>
        </div>
        <div class="fieldbody">
            <div class="box">
                <div class="t">选项</div>
                <div class="cnt">
                    <ul id="list_option">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            var pDoc = $(parent.document);
            var pFrame = pDoc.find('#ExtendFrame iframe');
            var pDataSet = pDoc.find('#ExtendFrame input[name="DataSet"]');
            var pDefault = pDoc.find('#ExtendFrame input[name="DefaultValue"]');
            var optionHtml = '',inputChecked='',optionDefault = pDefault.val();
            var selectList = JSON.parse(pDataSet.val());
            for (var i = 0; i < selectList.length; i++) {
                if (selectList[i].entryValue == optionDefault) {
                    inputChecked = 'checked="checked"';
                }
                optionHtml += '<li><a class="ico ico_reduce" title="删除"></a><a class="ico ico_fildadd" title="添加"></a><input ' + inputChecked + ' class="radio" type="radio" name="option"><input style="width:60px;" class="text" type="text" value="' + selectList[i].entryName + '"><span>=&gt;</span><input style="width:60px;" class="text" type="text" value="' + selectList[i].entryValue + '"></li>';
                inputChecked = '';
            }
            $('#list_option').html(optionHtml);
            $('#list_option input:radio').live("click", function () {
                pDefault.val($(this).parent().find("input:last").val());
            });
            $('#list_option :text').live('change', function () {
                var optVal = $(this).val(), optIndex = $(this).parent().index();
                if ($(this).next().text() == '=>') {
                    selectList[optIndex].entryName = optVal;
                } else {
                    selectList[optIndex].entryValue = optVal;
                }
                pDataSet.val(JSON.stringify(selectList));
            });
            $('#list_option a.ico_fildadd').live('click', function () {
                var optIndex = $(this).parent().index();
                selectList.splice(optIndex + 1, 0, { "entryName": "选项", "entryValue": "Default" });
                var html = '<li><a class="ico ico_reduce" title="删除"></a><a class="ico ico_fildadd" title="添加"></a><input class="radio" type="radio" name="option"><input style="width:60px;" class="text" type="text" value="选项"><span>=&gt;</span><input style="width:60px;" class="text" type="text" value="Default"></li>';
                $(this).parent().after(html);
                pDataSet.val(JSON.stringify(selectList));
            });
            $('#list_option a.ico_reduce').live('click', function () {
                var optIndex = $(this).parent().index();
                selectList.splice(optIndex, 1);
                $(this).parent().remove();
                pDataSet.val(JSON.stringify(selectList));
            });
        });
    </script>
</body>
</html>
